<template>
	<view class="content">
		<view class="header">
			<view class="view" v-for="(item,index) in columns" :key="index" @click="inx = index">
				<text>{{item.label}}</text>
				<u--image :showLoading="true" src="../../static/login/sanjiao.png" width="24rpx" height="24rpx" radius="0"></u--image>
			</view>
		</view>
		<view class="Box">
			<view v-for="(item,index) in lists" :key="index">
				<view class="BoxView">
					<view class="BoxOne">
						<u--image :showLoading="true" :src="item.teacher.avatar" width="94rpx" height="94rpx" radius="0"
							shape="circle"></u--image>
						<view class="BoxContent">
							<view class="BoxTop marginBottom">
								<text class="title">{{item.teacher.name}}</text>
								<text style="color:#888888;margin-left:15rpx;">美国教师</text>
							</view>
							<view class="BoxTop">
								<text class="Newtitle">{{item.teacher.speciality}}</text>
							</view>
						</view>
						<button class="cancel" @click="cancel(item)">预约取消</button>
					</view>
					<view class="BoxBottom">
						<text class="title">{{item.name}}</text>
						<view class="TimeFlex">
							<text class="TimeTitle">距离课程开始</text>
							<u-count-down :time="item.time * 1000" format="HH:mm:ss" autoStart millisecond
								@change="onChange">
								<view class="time">
									<view class="time__custom">
										<text
											class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
									</view>
									<text class="Timetext">小时</text>
									<!-- <text class="time__doc">:</text> -->
									<view class="time__custom">
										<text class="time__custom__item">{{ timeData.minutes }}</text>
									</view>
									<text class="Timetext">分</text>
									<!-- <text class="time__doc">:</text> -->
									<view class="time__custom">
										<text class="time__custom__item">{{ timeData.seconds }}</text>
									</view>
									<text class="Timetext">秒</text>
								</view>
							</u-count-down>
						</view>
						<view class="Boxinfo">
							<view class="u-Flex">
								<u--image :showLoading="true" src="../../static/Home/rqi.png" width="26rpx" height="26rpx" radius="0"
									></u--image>
								<text>{{item.date}}</text>	
							</view>
							<view class="u-Flex">
								<u--image :showLoading="true" src="../../static/Home/shijian.png" width="28rpx" height="28rpx" radius="0"
									></u--image>
								<text>{{item.start_time}}-{{item.end_time}}</text>	
							</view>
							<view class="u-Flex">
								<u--image :showLoading="true" src="../../static/Home/cishu.png" width="24rpx" height="24rpx" radius="0"
									></u--image>
								<text>1次/{{item.vip.time_num}}次</text>	
							</view>
						</view>
						<u-line-progress :percentage="3.33" height="15"></u-line-progress>
					</view>
				</view>
				<view class="checkTx" @click="huiyi(item.teacher_id)">
					<text class="checkTx_title">老师腾讯会议号</text>
					<view class="checkTx_view">
						<text class="checkTx_Text">查看会议号与密码</text>
						<u--image :showLoading="true" src="../../static/more.png" width="34rpx" height="34rpx" radius="0"
							></u--image>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="isShow" @close="isShow = false" @open="isShow = true" mode="center" round="20">
			<view class="NewpopupBody">
				<text class="title">确定取消预约吗？</text>
				<view class="but_flex">
					<button class="leftButton" @click="isShow = false">取消</button>
					<button class="rightButton" @click="clearReservation()">确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getUserCourse,clearReservation
	} from '../../api/Course.js';
	export default {
		data() {
			return {
				id:0,
				isShow:false,
				timeData: {},
				inx: 0,
				columns: [{
					label: '预约中',
					id: 804
				}, {
					label: '时间',
					id: 804
				}],
				req:{
					shop_id:0,
					limit:10,
					page:1,
					date:'',
					type:''
				},
				lists:{},
				time : 0
			}
		},
		methods: {
			onLoad(){
				this.req.shop_id = uni.getStorageSync('shop_id') || 1;
				this.getUserCourse()
			},
			onChange(e) {
				// /console.log(e)
				this.timeData = e
			},
			cancel(item){
				this.isShow = true;
				this.id=item.id
			},
			huiyi(e){
				uni.navigateTo({
					url:'Appointment_number?teacher_id=' + e
				})
			},
		 getSecondsDifference(targetTime) {
			// 将目标时间转换为Date对象
			const targetDate = new Date(targetTime);
			
			// 获取当前时间
			const currentDate = new Date();
			
			// 计算时间差（毫秒级）
			const difference = targetDate - currentDate;
			console.log(currentDate)
			console.log(targetDate)
			// 将时间差转换为秒
			const secondsDifference = Math.floor(difference / 1000);
			
			return secondsDifference > 0 ? secondsDifference : 0 ;
		},
			async getUserCourse() {
				let req = {
					...
					this.req,
					...{
						type:0
					}
				}
				try {
					const res = await getUserCourse(req);
					res.data.data.forEach(item => {
						 item.time = this.getSecondsDifference(item.date+' '+item.start_time)
					});
					this.lists = {...res.data.data};
					console.log(res.data.data)
	
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			async clearReservation(){
				try {
					let ids = this.id
					let shop_id = this.req.shop_id
					const res = await clearReservation({
						id:ids,
						shop_id: shop_id
					});
					this.isShow = false
					this.getUserCourse()
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #f6f7f9;
	}
</style>
<style scoped lang="scss">
	.content {
		padding-bottom:50rpx;
		.NewpopupBody{
			width: 550rpx;
			height:auto;
			padding-top:70rpx;
			padding-bottom:70rpx;
			background-color: transparent;
			.title{
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 36rpx;
				color: #333333;
				display: block;
				text-align: center;
			}
			.content_text{
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				display: block;
				text-align: center;
				padding-top:30rpx;
				padding-bottom:30rpx;
			}
			.but_flex{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top:50rpx;
				.leftButton{
					width:40%;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius:50rpx;
					background-color:#efefef;
				}
				.rightButton{
					width:40%;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius:50rpx;
					background: linear-gradient( 270deg, #FFB930 0%, #FE7000 100%);
				}
			}
		}
		.header {
			width: auto;
			background-color: #fff2e8;
			padding: 20rpx 20rpx 0rpx 30rpx;
			display: flex;
			align-items: center;

			.view {
				width: auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-right: 160rpx;
				padding-bottom: 20rpx;

				text {
					border-bottom: 3px solid transparent;
					
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 28rpx;
				}
			}

			/deep/ .u-image {
				margin-left:15rpx;
			}
		}

		.Box {
			.BoxView {
				width: 85%;
				margin: 0px auto;
				background-color:#fff;
				border-radius: 20rpx;
				padding: 30rpx 30rpx 30rpx 30rpx;
				margin-top: 20rpx;
				.cancel{
					margin-left:40rpx;
					color:#333;
					font-weight:500;
					background-color: #f6f7f9 !important;
				}
			}

			.BoxOne {
				display: flex;
				align-items: center;
				padding-bottom: 25rpx;
				border-bottom: 1px solid #F2F2F2;
				
				.marginBottom {
					margin-bottom: 10rpx;
				}

				.BoxTop {
					margin-left: 20rpx;
					display: flex;
					align-items: center;

					text {
						display: block;
						font-size: 24rpx;
					}

					.title {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 32rpx;
						color: #333333;
						font-style: normal;
					}

					.Newtitle {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #333333;
						font-style: normal;
					}
				}
			}

			button {
				width: 154rpx;
				height: 60rpx;
				// background: linear-gradient(270deg, #3078FF 0%, #009DFE 100%);
				border-radius: 46rpx;
				margin: 0px;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 26rpx;
			}
		}
		
		.BoxBottom{
			.title{
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #333333;
				margin-top:25rpx;
				margin-bottom:10rpx;
				display: block;
			}
			.TimeFlex{
				display: flex;
				align-items: center;
				.TimeTitle{
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
					margin-right:10rpx;
				}
			}
			.Boxinfo{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top:25rpx;
				margin-bottom:25rpx;
				.u-Flex{
					display: flex;
					align-items: center;
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #333333;
						margin-left:5rpx;
					}
				}
			}
			.time {
			    @include flex;
			    align-items: center;
				
				.Timetext{
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #F1330D;
					margin-left:5rpx;
					margin-right:5rpx;
				}
				
				.time__doc{
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #F1330D !important;
				}
				
			    &__custom {
			         // margin-top: 4px;
			         width: 20px;
			         height: 20px;
			         background-color:#ffb1b0;
			         border-radius: 4px;
			         /* #ifndef APP-NVUE */
			         display: flex;
			         /* #endif */
			         justify-content: center;
			         align-items: center;
			    
			        &__item {
			             color: #F1330D !important;
			             font-size: 12px;
			             text-align: center;
			         }
			    }
			    
			    &__doc {
			         color: $u-primary;
			         padding: 0px 4px;
			     }
			    
			    &__item {
			         color: #606266;
			         font-size: 15px;
			         margin-right: 4px;
			     }
			}
		}
		
		.checkTx {
			width:88%;
			padding:25rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin:0px auto;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			background-color:#fff;
			border-radius:20rpx;
			.checkTx_title{
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: #333333;
			}
			.checkTx_view{
				display: flex;
				align-items: center;
				.checkTx_Text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #888888;
					margin-right:10rpx;
				}
			}
		}
	}
</style>